<!-- inline styles related to this page -->
<style type="text/css">

	/*tab*/
	#zGForm {
		width:100%;
		position: relative;
		top:10px;
	}
	#zGliTab {
		margin-left:70%;
		top: 660px;
		position: absolute;
	}
	#zGliTab li:hover{
		background: #c8c8c8;
	}



	.ctytab{
		width: 100%;height: 100%;
		position: absolute;
		display: none;


	}

	.ctyad_vip{
		width: 160px;
		height: 40px;
		background: #3abdeb;
		margin-top: 10px;
		margin-bottom:10px;
		font-size:18px;
		text-align: center;
		line-height: 40px;
		color: #FFFFFF;
		float: left;
		cursor:pointer;
	}
	.cty_bg img{
		float: right;margin-top: 10px;margin-right:18px;
	}
.ctyad_vip span{
		margin-right: 6px;
	}
	#ctysimple-table{
width:100%;
font-size: 16px;
}
#ctysimple-table th{
height:40px;

color: #565b61;
text-align: center;
border: none !important;
background:#76d4f6;
}
#ctysimple-table tr {
border: none !important;
}
#ctysimple-table td {
border: none !important;
}
.ico{
margin-left:40px;
margin-right: 50px;
}
#ctysimple-table td{
border-right: none;
margin-left: 57px;
color: #595961;
}
#ctysimple-table tr{
border: none;
background: #FFFFFF;
margin-left: 57px;
height: 60px;
line-height: 60px;
}

#ctysimple-table .tr td{
height: 60px;
line-height: 60px;
text-align: center;

}
#ctysimple-table .trtow td{
height: 60px;
line-height: 60px;
text-align: center;

}
#ctysimple-table tr:hover{
	background: #c7f1ff;
}

.ctycenter .pos-rel{
margin-left: 57px;
}
.ctyxiala{
padding-left: 20px;
color:#a9a7b4;
padding-top:10px;
padding-bottom: 10px;
background: #FFFFFF;
}
#zGBtn {
	width: 118px;
	height:40px;
	background:#3cbced;
	margin-left:270px;
	cursor: pointer;
	font-size: 18px;
	color:white;
	border-radius: 4px;
	margin-top: 46px;
	outline: none;
}
.tan {
	text-align:center;
	margin-left:400px;
}
</style>

<!-- begin -->
<div id="zGForm">
	 <div class="ctytab">

		<div class="advip">
			<div class="ctyad_vip"><span>+</span>增加店员</div>
			<div class="cty_bg">
				<img src="images/img/shezhi.png"/>
				<img src="images/img/zhibiao.png"/>
			</div>

			<table id="ctysimple-table" class="table  table-bordered table-hover">
			<thead>
				<tr>
					<th class="center">
						<label class="pos-rel">
							<input type="checkbox" class="ace">
							<span class="lbl"></span>
						</label>
					</th>
					<th class="ico">
	<i class="ace-icon glyphicon glyphicon-trash" style="color: #feffff;"></i>
					</th>
					<th>

						供应商ID
					</th>
					<th>供应商名称</th>
					<th>联系人</th>
					<th>联系电话</th>

					<th>地址</th>


					<th>备注</th>

					<th>操作</th>
				</tr>
			</thead>

			<tbody>
				<tr class="tr">
					<td class="center">
						<label class="pos-rel">
							<input type="checkbox" class="ace">
							<span class="lbl"></span>
						</label>
					</td>
					<td>

					</td>

					<td>
					12345678
					</td>

					<td>
						张三食品
					</td>
					<td>张三</td>
					<td>15033456258</td>
					<td>2016-11-17-12:00:00</td>

					<td>
					备注信息
					</td>
					<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
					</td>



				</tr>

					<tr class="trtow">
					<td class="center">
						<label class="pos-rel">
							<input type="checkbox" class="ace">
							<span class="lbl"></span>
						</label>
					</td>

<td>
	<i class="ace-icon glyphicon glyphicon-trash" style="color: #5ac6ec;"></i>
	</td>
<td>12345678</td>
<td>张三食品</td>
<td>张三</td>
<td>15033456258</td>
<td>2016-11-17-12:00:00</td>

<td>
备注信息
</td>
<td>
<i class="ace-icon fa fa-pencil-square-o" style="color: #5ac6ec;"></i>
</td>

</tr>

<tr class="tr">
<td class="center">
	<label class="pos-rel">
		<input type="checkbox" class="ace">
			<span class="lbl"></span>
			</label>
			</td>
<td>

</td>

<td>
12345678
</td>

<td>
张三食品
</td>
<td>张三</td>
<td>15033456258</td>
<td>2016-11-17-12:00:00</td>

<td>
备注信息
</td>
<td>
<i class="ace-icon fa fa-pencil-square-o"></i>
</td>

</tr>

<tr class="tr">
<td class="center">
		<label class="pos-rel">
			<input type="checkbox" class="ace">
		<span class="lbl"></span>
				</label>
					</td>
<td>

</td>

<td>
12345678
</td>

<td>
张三食品
</td>
<td>张三</td>
<td>15033456258</td>
<td>2016-11-17-12:00:00</td>

<td>
备注信息
</td>
<td>
<i class="ace-icon fa fa-pencil-square-o"></i>
</td>
</tr>

<tr class="tr">
<td class="center">
			<label class="pos-rel">
				<input type="checkbox" class="ace">
					<span class="lbl"></span>
					</label>
					</td>
<td>

</td>

<td>
12345678
</td>

<td>
张三食品
</td>
<td>张三</td>
<td>15033456258</td>
<td>2016-11-17-12:00:00</td>

<td>
备注信息
</td>
<td>
<i class="ace-icon fa fa-pencil-square-o"></i>
</td>
</tr>


<tr class="tr">
<td class="center">
			<label class="pos-rel">
				<input type="checkbox" class="ace">
					<span class="lbl"></span>
					</label>
					</td>
<td>

</td>

<td>
12345678
</td>

<td>
张三食品
</td>
<td>张三</td>
<td>15033456258</td>
<td>2016-11-17-12:00:00</td>

<td>
备注信息
</td>
<td>
<i class="ace-icon fa fa-pencil-square-o"></i>
</td>
</tr>


<tr class="tr">
<td class="center">
			<label class="pos-rel">
					<input type="checkbox" class="ace">
					<span class="lbl"></span>
					</label>
					</td>
<td>

</td>

<td>
12345678
</td>

<td>
张三食品
</td>
<td>张三</td>
<td>15033456258</td>
<td>2016-11-17-12:00:00</td>

<td>
备注信息
</td>
<td>
<i class="ace-icon fa fa-pencil-square-o"></i>
</td>

</tr>
</table>

			<div class="ctyxiala" style="margin-top: 20px;">
				共三页，每页显示<select><option>10</option><option>20</option><option>50</option></select>
			</div>
			<div id="zGliTab">
				<ul class="pagination">
					<li class="disabled">
						<a href="#">
							<i class="ace-icon fa fa-chevron-left" ></i>
						</a>
					</li>
					<li style="border:1px #e7e7e7 solid">
						<a href="#" style="background:white;color: dodgerblue; border: none;">1</a>
					</li>

					<li>
						<a href="#">2</a>
					</li>

					<li>
						<a href="#">3</a>
					</li>

					<li>
						<a href="#">...</a>
					</li>

					<li>
						<a href="#">10</a>
					</li>

					<li>
						<a href="#">
							<i class="ace-icon fa fa-chevron-right"></i>
						</a>
					</li>
				</ul>
			</div>
		</div>

		<div class="ctytab">

			<div class="zylcontent">
				<div class="zylinput">
					<div style="width: 200px;height: 200px;background: #506575;color: white;line-height: 200px;font-size: 2em;border-radius: 5px;display: none;"
						 class="tan">保存成功！
					</div>
					<span id="zylspan">
						<img src="images/index/ing.png"/>
					</span>
					<span>*</span>供应商ID：
					<input type="text" placeholder="请输入供应商ID" class="zyltext"/><br/>
					<li>
						<label width="100px;text-align：right"><span>*</span>供应商名称：</label>
						<input type="text" placeholder="请输入供应商名称" class="zyltext"/>
					</li>
				　　<span>*</span>联系人：
					<input type="text" placeholder="请输入联系人名" class="zyltext"/><br/>
					<span>*</span>联系电话：
					<input type="text" placeholder="请输入联系人的联系电话" class="zyltext"/><br/>
					<span>*</span>地址：
					<select>
						<option>请输入省</option>
					</select>

					<select style="width: 191px;height: 35px;">
						<option>请输入市</option>
					</select>
					<select style="width: 191px;height: 35px;">
						<option>请输入区/县</option>
					</select><br />
					<span>*</span>店员角色：<select><option >收银员</option></select><br />
					店员权限：<input type="text" class="zyltext" style="margin-left: -1px;margin-left: 25px;"/>
				</div>
				<input type="submit"class="zylbutton_one"value="保存">
				<button id="zGBtn">保存并新增</button>
			</div>
		</div>
	</div>

	<!--li tab-->



</div>
<!-- end -->

<!-- inline scripts related to this page -->
<script type="text/javascript">
	jQuery(function($) {
		//form
		$('#zGliTab>ul li').click(function () {
			$('#zGForm .ctytab').eq($(this).index()).stop().slideDown('2000').siblings('div').hide();
			$('#zGliTab').show();
		});
		$('#zGliTab>ul li:eq(1)').click(function () {
			$('#zGliTab').hide()
		});
//		$('#ZgBtn').click(function () {
//			$('.tan').show();
//		});
//		$('.zGNav-one>ul li').click(function () {
//			$('#zGForm div').eq($(this).index()).stop().show().siblings('div').hide();
//		});
		$('#zGBtn').click(function () {
			$('.tan').show().slideUp(zGtime);
		});
	});
</script>